<template>
	<view
		:class="[dot ? 'tui-badge-dot' : 'tui-badge', 'tui-' + type, !dot ? 'tui-badge-scale' : '']"
		:style="{ top: top, right: right, position: absolute ? 'absolute' : 'static', transform: getStyle, margin: margin }"
		@tap="handleClick"
	>
		<slot></slot>
	</view>
</template>

<script setup>
import { ref, computed } from 'vue'

const emit = defineEmits(['click'])

const props = defineProps({
	//primary,warning,green,danger,white，black，gray,white_red
	type: {
		type: String,
		default: 'danger'
	},
	//是否是圆点
	dot: {
		type: Boolean,
		default: false
	},
	margin: {
		type: String,
		default: '0'
	},
	//是否绝对定位
	absolute: {
		type: Boolean,
		default: true
	},
	top: {
		type: String,
		default: '-8rpx'
	},
	right: {
		type: String,
		default: '0'
	},
	//缩放比例
	scaleRatio: {
		type: Number,
		default: 1
	},
	//水平方向移动距离
	translateX: {
		type: String,
		default: '0'
	}
})

const getStyle = computed(() => `scale(${props.scaleRatio}) translateX(${props.translateX})`)

const handleClick = () => {
	emit('click', {})
}
</script>

<style lang="scss" scoped>
/* color start*/

.tui-primary {
	background-color: #5677fc;
	color: #fff;
}

.tui-danger {
	background-color: #ed3f14;
	color: #fff;
}

.tui-red {
	background-color: #f74d54;
	color: #fff;
}

.tui-warning {
	background-color: #ff7900;
	color: #fff;
}

.tui-green {
	background-color: #19be6b;
	color: #fff;
}

.tui-white {
	background-color: #fff;
	color: #333;
}

.tui-white_red {
	background-color: #fff;
	color: #f74d54;
}

.tui-white_primary {
	background-color: #fff;
	color: #5677fc;
}

.tui-white_green {
	background-color: #fff;
	color: #19be6b;
}

.tui-white_warning {
	background-color: #fff;
	color: #ff7900;
}

.tui-black {
	background-color: #000;
	color: #fff;
}

.tui-gray {
	background-color: #ededed;
	color: #999;
}

/* color end*/

/* badge start*/

.tui-badge-dot {
	height: 8px;
	width: 8px;
	border-radius: 50%;
}

.tui-badge {
	font-size: 24rpx;
	line-height: 24rpx;
	height: 36rpx;
	min-width: 36rpx;
	padding: 0 10rpx;
	box-sizing: border-box;
	border-radius: 100rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 10;
}

.tui-badge-scale {
	transform-origin: center center;
}

/* badge end*/
</style>
